<template>
    <div id="bottom-panel">
        <div class="mode-options" v-show="!store.modeType">
            <el-popover placement="top" :width="290" trigger="hover">
                <template #reference>
                    <div class="options-button">控制切换</div>
                </template>
                <el-radio-group v-model="store.controlType">
                    <el-radio-button label="常规模式" value="orbit" />
                    <el-radio-button label="飞行模式" value="firstperson" />
                    <el-radio-button label="游客模式" value="pointer" />
                </el-radio-group>
            </el-popover>
            <div class="options-button">水管预览</div>
            <div class="options-button">气管预览</div>
        </div>
        <div class="mode-options" v-show="store.modeType">
            <el-dropdown placement="top" @command="changeBuild">
                <div class="options-button">构筑物列表</div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="item in modelConfig.children" :command="item.name">{{ item.name }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <el-carousel style="width: 100%;height: 66%;" :autoplay="false" trigger="click"
            v-loading.fullscreen.lock="store.modeChange" element-loading-text="正在切换模式..."
            element-loading-background="rgba(0, 0, 0, 0.7)" @change="changeMode" motion-blur>
            <el-carousel-item>
                <div class="mode-card">
                    <div class="mode-name">游览模式</div>
                    <div class="mode-context">当前为游览模式，用于直观查看整个厂区环境、建筑、路线等</div>
                </div>
            </el-carousel-item>
            <el-carousel-item>
                <div class="mode-card">
                    <div class="mode-name">管理模式</div>
                    <div class="mode-context">当前为管理模式，用于直观查看整个厂区环境、建筑、路线等</div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useCounterStore } from '../store/index.js'
import modelConfig from '../assets/js/modelConfig'
const store = useCounterStore()

function changeBuild(command) {
    if(command === store.buildName) return
    store.buildName = command
}
function changeMode(val) {
    store.controlType = 'orbit'
    store.modeType = val
    store.modeChange = true;
}
onMounted(() => {

})
</script>
<style scoped lang="scss">
#bottom-panel {
    width: calc(100vw - $panelWidth * 2);
    height: $bottomHeight;
    position: absolute;
    bottom: 0;
    left: $panelWidth;
    background: $bottomPanelBackgroundColor;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-top: 50px;
    overflow: hidden;

    .mode-card {
        width: 100%;
        height: calc($bottomHeight * 0.66);
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .mode-name {
            font-size: 22px;
            font-weight: bold;
        }

        .mode-context {
            font-size: 14px;
        }
    }

    .mode-options {
        width: 50%;
        height: calc($bottomHeight * 0.33);
        display: flex;
        justify-content: space-around;
        align-items: center;

        .options-button {
            min-width: 100px;
            height: 40px;
            padding: 0 10px;
            display: flex;
            font-size: 16px;
            color: rgb(0, 0, 0);
            justify-content: space-around;
            align-items: center;
            border-radius: 5px;
            box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);
            user-select: none;
        }

        .options-button:hover {
            cursor: pointer;
            box-shadow: inset 0px -1px 4px rgba(0, 0, 0, 0.6);
        }
    }
}
</style>